<template>
  <div ref="echartDivRef" :style="{ height: height, width: width }"></div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults, onMounted, ref, watchEffect } from "vue"
import { EChartsOption } from "echarts"
import * as echarts from "echarts"
import useEchars from "../hooks/useEchars"
const props = withDefaults(
  defineProps<{
    options: EChartsOption
    width?: string
    height?: string
  }>(),
  {
    width: "100%",
    height: "360px",
  },
)

const echartDivRef = ref<HTMLElement>()

onMounted(() => {
  const { setOptions } = useEchars(echartDivRef.value!)

  watchEffect(() => {
    setOptions(props.options)
  })
})
</script>
<style lang="less" scoped></style>
